<template>
  <div>
    <div class="mainindex">
      <div class="welinfo">
        <span><img alt="天气" src="@/assets/images/sun.png"/></span>
        <b>{{nickname}}，欢迎使用【南京市环境保护在线教育系统】</b>
        <!--<a href="#">帐号设置</a>-->
      </div>

      <div class="welinfo">
        <span><span><img alt="时间" src="@/assets/images/time.png"/></span>
        <i>您上次登录的时间：2013-10-09 15:22</i> <!--（不是您登录的？<a href="#">请点这里</a>）--></span>

        <span style="float: right"><span><img alt="时间" src="@/assets/images/i07.png" style="width: 32px"/></span>
        <i>您可访问系统：
          <router-link v-if="checkPerms('revenue')" :to="{name : 'revenue'}">营收计费系统</router-link>
          <router-link v-if="checkPerms('system')" :to="{name : 'system'}">平台系统设置</router-link>
        </i>
        </span>
      </div>

      <div class="xline"></div>
      <div class="mainbox">

        <div class="mainleft">


          <div class="leftinfo">
            <div class="listtitle"><a class="more1" href="#">更多</a>数据统计</div>

            <div class="maintj">

            </div>

          </div>
          <!--leftinfo end-->


          <div class="leftinfos">


            <div class="infoleft">

              <div class="listtitle"><a class="more1" href="#">更多</a>待办事项</div>
              <ul class="newlist">
                <!--<li><a href="#">上海自贸区今日正式挂牌成立</a><b>10-09</b></li>-->
                <!--<li><a href="#">习近平将访东南亚两国 首次出席APEC峰会</a><b>10-08</b></li>-->
                <!--<li><a href="#">最高法:谎称炸弹致航班备降者从重追刑责</a><b>10-09</b></li>-->
                <!--<li><a href="#">华北大部遭遇雾霾天 北京全城陷重污染</a><b>10-06</b></li>-->
                <!--<li><a href="#">"环保专家"董良杰涉嫌寻衅滋事被刑拘</a><b>10-05</b></li>-->
                <!--<li><a href="#">中央巡视组：重庆对一把手监督不到位</a><b>10-04</b></li>-->
                <!--<li><a href="#">囧!悍马没改好成华丽马车(图)</a><b>10-03</b></li>-->
              </ul>

            </div>


            <div class="inforight">
              <div class="listtitle"><a class="more1" href="#">添加</a>常用工具</div>

              <ul class="tooli">
                <!--<li><span><img src="@/assets/images/d01.png"/></span>-->
                <!--<p><a href="#">信息资料</a></p></li>-->
                <!--<li><span><img src="@/assets/images/d02.png"/></span>-->
                <!--<p><a href="#">编辑</a></p></li>-->
                <!--<li><span><img src="@/assets/images/d03.png"/></span>-->
                <!--<p><a href="#">记事本</a></p></li>-->
                <!--<li><span><img src="@/assets/images/d04.png"/></span>-->
                <!--<p><a href="#">任务日历</a></p></li>-->
                <!--<li><span><img src="@/assets/images/d05.png"/></span>-->
                <!--<p><a href="#">图片管理</a></p></li>-->
                <!--<li><span><img src="@/assets/images/d06.png"/></span>-->
                <!--<p><a href="#">交易</a></p></li>-->
                <!--<li><span><img src="@/assets/images/d07.png"/></span>-->
                <!--<p><a href="#">档案袋</a></p></li>-->
              </ul>

            </div>


          </div>


        </div>
        <!--mainleft end-->


        <div class="mainright">


          <div class="dflist">
            <div class="listtitle"><a class="more1" href="#">更多</a>最新信息</div>
            <ul class="newlist">
              <!--<li><a href="#">上海自贸区今日正式挂牌成立</a></li>-->
              <!--<li><a href="#">习近平将访东南亚两国 首次出席APEC峰会</a></li>-->
              <!--<li><a href="#">最高法:谎称炸弹致航班备降者从重追刑责</a></li>-->
              <!--<li><a href="#">华北大部遭遇雾霾天 北京全城陷重污染</a></li>-->
              <!--<li><a href="#">"环保专家"董良杰涉嫌寻衅滋事被刑拘</a></li>-->
              <!--<li><a href="#">中央巡视组：重庆对一把手监督不到位</a></li>-->
              <!--<li><a href="#">囧!悍马没改好成华丽马车(图)</a></li>-->
              <!--<li><a href="#">澳门黄金周加派稽查人员监察出租车违规行为</a></li>-->
              <!--<li><a href="#">香港环境局长吁民众支持政府扩建堆填区</a></li>-->
            </ul>
          </div>


          <div class="dflist1">
            <div class="listtitle"><a class="more1" href="#">更多</a>信息统计</div>
            <ul class="newlist">
              <!--<li><i>会员数：</a></i>2535462</li>-->
              <!--<li><i>文档数：</a></i>5546</li>-->
              <!--<li><i>普通文章：</a></i>2315</li>-->
              <!--<li><i>软件：</a></i>1585</li>-->
              <!--<li><i>评论数：</a></i>5342</li>-->
            </ul>
          </div>


        </div>
        <!--mainright end-->


      </div>


    </div>
  </div>
</template>

<script>
  import { mapActions, mapGetters } from 'vuex'
  import $ from 'jquery'
  function setWidth() {
    var width = ($('.leftinfos').width() - 12) / 2;
    $('.infoleft,.inforight').width(width);
  }

  export default {
    name: "work",
    computed: {
      ...mapGetters(['nickname', 'avatar','routers'])

    },
    mounted(){
      setWidth();
      $(window).resize(function(){
        setWidth();
      });
    },
    methods:{
      checkPerms(routeName){
        let perms = this.routers.map(route => {
          return route.name
        })
        return  perms.indexOf(routeName) > -1
      }
    }
  }
</script>

<style lang="less" scoped>
  a,a:focus{text-decoration:none;color:#000;outline:none;}
  a:hover{color:#00a4ac;text-decoration:none;}
  /*index*/
  .mainindex {
    padding: 20px;
    overflow: hidden;
  }

  .welinfo {
    height: 32px;
    line-height: 32px;
    padding-bottom: 8px;
  }

  .welinfo span {
    float: left;
  }

  .welinfo b {
    padding-left: 8px;
  }

  .welinfo a {
    padding-left: 15px;
    color: #3186c8;
  }

  .welinfo a:hover {
    color: #F60;
  }

  .welinfo i {
    font-style: normal;
    padding-left: 8px;
  }

  .xline {
    border-bottom: solid 1px #dfe9ee;
    height: 5px;
  }

  .iconlist {
    padding-left: 40px;
    overflow: hidden;
  }

  .iconlist li {
    text-align: center;
    float: left;
    margin-right: 25px;
    margin-top: 25px;
  }

  .iconlist li p {
    line-height: 25px;
  }

  .ibox {
    clear: both;
    padding-left: 40px;
    padding-top: 18px;
    overflow: hidden;
    padding-bottom: 18px;
  }

  .ibtn {
    background: url(~@/assets/images/ibtnbg.png) repeat-x;
    border: solid 1px #bfcfe1;
    height: 23px;
    line-height: 23px;
    display: block;
    float: left;
    padding: 0 15px;
    cursor: pointer;
  }

  .ibtn img {
    margin-top: 5px;
    float: left;
    padding-right: 7px;
  }

  .box {
    height: 15px;
  }

  .infolist {
    padding-left: 40px;
    padding-bottom: 15px;
  }

  .infolist li {
    line-height: 23px;
    height: 23px;
    margin-bottom: 8px;
  }

  .infolist li span {
    float: left;
    display: block;
    margin-right: 10px;
  }

  .info {
    padding-left: 40px;
    background: url(~@/assets/images/search.png) no-repeat 10px 15px;
    padding-top: 15px;
    padding-bottom: 20px;
  }

  .umlist {
    padding-left: 40px;
  }

  .umlist li {
    float: left;
    background: url(~@/assets/images/ulist.png) no-repeat 0 5px;
    padding-left: 10px;
    margin-right: 15px;
  }
</style>